<template>
  <Collapse :defaultActiveKey="[]" >
    <CollapsePanel header="基础组件" panel-key="1" force-render>
      <img data-item="{clazz:'line', size: [100, 50], label:'线'}" src="../../assets/icons/line.svg"  />
      <div>线</div>
      <img data-item="{clazz:'text', size: [50, 50], label: '文本'}" src="../../assets/icons/text.svg"  />
      <div>文本</div>
      <img data-item="{clazz:'twoBessel', size: [100, 100], label:'二次贝塞尔曲线'}" src="../../assets/icons/maycur-icon_D-03.svg"  />
      <div>二次贝尔曲线</div>
      <img data-item="{clazz:'threeBessel', size: [100, 100], label:'文本'}" src="../../assets/icons/three-maycur.svg"  />
      <div>三次贝尔曲线</div>
      <img data-item="{clazz:'four', size: [100, 100], label:'四角'}" src="../../assets/icons/four.svg"  />
      <div>四角</div>
      <img data-item="{clazz:'rect', size: [100, 100], label:'矩形'}" src="../../assets/icons/rect.svg"  />
      <div>矩形</div>
    </CollapsePanel>
    <CollapsePanel header="AGV组件" panel-key="1" force-render>
      <img data-item="{clazz:'car', size: [50, 50], label:'agv小车'}" src="../../assets/icons/agvcar.svg"  />
      <div>AGV</div>
      <img data-item="{clazz:'location', size: [20, 20], label:'站点'}" src="../../assets/icons/location.svg"  />
      <div>站点</div>
      <img data-item="{clazz:'carLocation', size: [50, 50], label:'停车位'}" src="../../assets/icons/carp.svg"  />
      <div>停车位</div>
      <img data-item="{clazz:'charging', size: [50, 50], label:'充电桩'}" src="../../assets/icons/charging.svg"  />
      <div>充电桩</div>
      <img data-item="{clazz:'container', size: [18, 9], label:'托盘'}" src="../../assets/icons/container.svg"  />
      <div>托盘</div>
    </CollapsePanel>
  </Collapse>
</template>
<script>
import {Collapse, CollapsePanel} from "ant-design-vue"

export default {
  name: 'App',
  components: {
    Collapse,
    CollapsePanel
  }
}
</script>
<style scoped lang="scss">
</style>